<div class="headerButton">
  <div>
    <h2>路由守卫相关（但代码中已关闭），本套代码使用了路由预加载测略</h2>
    <button (click)="login()">login</button>
    <button (click)="loginOut()">loginOut</button>
    <button (click)="canGo()">canGo</button>
    <button (click)="canNotGo()">canNotGo</button>
    <button (click)="canLeave()">canLeave</button>
    <button (click)="canNotLeave()">canNotLeave</button>
    <span style="padding:5px;display:inline-block;color:white;">
      注意查看index.html文件对于窗口图标的更改
    </span>
  </div>

</div>

<ul style="padding:0 5px;background: rgb(196, 228, 228)">
  <li routerLink="one" routerLinkActive="active">one</li>
  <li routerLink="two" routerLinkActive="active">two</li>
  <li routerLink="three" routerLinkActive="active">three</li>
  <h2>各个实例模块</h2>
  <div style="padding:5px;background: rgb(0, 10, 2);font-size: 16px;color:white;">
    <p>全局数据传递服务
      <span>{{child}}</span>
    </p>
  </div>
  <span style="padding:5px">箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域</span>
</ul>
<div class="popupRoute">
  <button style="background: rgb(210, 56, 224);" (click)="toTwo()">two/:id形式路由</button>
  <div style="background: rgb(56, 224, 98);padding:0 15px;" class="waper">
    <h3 style="margin:0 10px;padding:0;">使用命名路由写出来的弹出框</h3>
    <button [routerLink]="[{ outlets: { popup1: ['compose1'] } }]">信息提示</button>
    <button (click)="comfirmModal()">comfirmModal</button>
  </div>
</div>

<router-outlet></router-outlet>
<router-outlet name="popup1"></router-outlet>
<router-outlet name="popup2"></router-outlet>